<!--
 * @Author: gyc
 * @Date: 2020-05-25 09:10:02
 * @LastEditTime: 2020-08-25 15:39:58
 * @Description: Nuxt测试版
--> 
<template>
<Row class="do-share">
    <Col :xs="{span:24}" :lg="{span:24}" class="do-share-box">
    <!--<Breadcrumb class="write-edit-breadcrumb">
        <BreadcrumbItem to="/">首页</BreadcrumbItem>
        <BreadcrumbItem to="/user/userInfo" target="_blank">用户中心</BreadcrumbItem>
        <BreadcrumbItem>编写文章</BreadcrumbItem>
      </Breadcrumb>-->
    <h3>我要分享</h3>
    <div class="do-share-class">
        <span>类别</span>
        <Select v-model="shareClass" size="small" style="width:100px;margin-right:10px">
            <Option v-for="item in shareList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <span>地区</span>
        <Select v-model="areaClass" size="small" style="width:100px">
            <Option v-for="item in areaList" :value="item" :key="item">{{ item }}</Option>
        </Select>
    </div>
    <div class="do-share-main">
        <div class="do-share-main-item" v-if="upImg">
            <span>封面</span>
            <Upload action="#" ref="fm_upload" :show-upload-list="true" :before-upload="imgUpload">
                <Button icon="ios-cloud-upload-outline" class="do-share-upload-btn">上传封面</Button>
            </Upload>
            <span style="margin-left:20px;" @click="showYL">预览</span>
            <img :src="fmFileUrl" class="fm-file-url" v-if="iShowYL" />
        </div>
        <div class="do-share-main-item" v-if="upImg">
            <span>图片</span>
            <Upload multiple type="drag" action="#" :before-upload="imgUpload2" :on-remove="removeImg">
                <div class="upload-img-box">
                    <Icon type="ios-cloud-upload" size="52" style="color: #FF5773"></Icon>
                    <p>上传更多</p>
                </div>
            </Upload>
        </div>
        <div class="do-share-main-item">
            <span>标题</span>
            <input type="text" v-model="title" />
        </div>
        <div class="do-share-main-item">
            <span>名称</span>
            <input type="text" v-model="name" />
        </div>
        <div class="do-share-main-item">
            <span>标签</span>
            <Tag checkable color="#FF5773" :checked="false" class="share-main-item-tag" @on-change="selctTag" v-for="(item, index) in tagList" :key="index" :name="item">{{item}}</Tag>
        </div>
        <div class="do-share-main-item">
            <span>评分</span>
            <Rate allow-half v-model="rate" show-text></Rate>
        </div>
        <div class="do-share-main-item">
            <div style="display:flex;margin-bottom:20px">
                <span>插入链接:</span>
                <input type="text" v-model="link" />
            </div>
            <div style="display:flex">
                <span>链接标题:</span>
                <input type="text" v-model="platform" />
            </div>
        </div>
        <div class="do-share-main-item">
            <i-input v-model="profile" maxlength="300" show-word-limit type="textarea" placeholder="简介" style="width: 450px" :autosize="{ minRows: 4, maxRows: 8 }" />
        </div>
        <div class="do-share-main-btn">
            <button-sao :type="2" msg="发布" @confirm="pubMyshare" style="margin-right:60px"></button-sao>
            <button-sao :type="1" msg="重置"></button-sao>
        </div>
    </div>
    </Col>
</Row>
</template>

<script>
import buttonSao from "@/components/button/button_sao";
export default {
    name: "doShare",
    layout: "userPage",
    data() {
        return {
            shareList: [{
                    value: "影视",
                    label: "影视",
                },
                {
                    value: "音乐",
                    label: "音乐",
                },
                {
                    value: "动漫",
                    label: "动漫",
                },
            ],
            profile: "",
            tagList: ["综艺", "日剧", "动漫", "音乐"],
            selectTagList: [],
            shareClass: "影视",
            rate: 1,
            areaList: ["国产", "日本", "韩国", "欧美", "其他"],
            areaClass: "",
            fmFile: null,
            fmFileUrl: "",
            fmFormat: ["jpg", "png", "wenbp", "svg", "ico"],
            iShowYL: false,
            shareFile: [],
            upImg: false,
            title: "",
            platform: "",
            link: "",
            name: "",
        };
    },
    methods: {
        //封面图片
        imgUpload(file) {
            // let patt='/\^.[jpg]/'
            // console.log(patt.test(file.name))
            this.fmFile = file;
            this.$refs.fm_upload.clearFiles();
            console.log(file);
            var reader = new FileReader();
            let _this = this;
            reader.onload = function (e) {
                // target.result 该属性表示目标对象的DataURL
                _this.fmFileUrl = e.target.result;
            };
            // 传入一个参数对象即可得到基于该参数对象的文本内容
            reader.readAsDataURL(file);
            return false;
        },
        //分享图片
        imgUpload2(file) {
            this.shareFile.push(file);
            console.log(this.shareFile);
        },
        //删除分享图片
        removeImg(file, fileList) {
            let fileName = [];
            this.shareFile.forEach(function (e) {
                fileName.push(e.name);
            });
            const indexOf = fileName.indexOf(file.name);
            if (indexOf > -1) {
                this.shareFile.splice(indexOf, 1);
            }
        },
        selctTag(e, name) {
            if (e) {
                this.selectTagList.push(name);
            } else {
                this.selectTagList.splice(this.selectTagList.indexOf(name), 1);
            }
        },
        pubMyshare() {
            console.log(this.selectTagList, "1111");
            //文件上传
            // let param = new FormData();
            // param.append("fmImg", this.fmFile);
            // this.shareFile.forEach(function(e) {
            //   param.append("shareImg", e);
            // });
            // const config = {
            //   headers: { "Content-Type": "multipart/form-data" }
            // };
            // this.$axios.post("/img/upLoadImg", param, config);//图片上传
            if (
                this.title !== "" &&
                this.shareClass !== "" &&
                this.areaClass !== "" &&
                this.selectTagList !== "" &&
                this.rate !== "" &&
                this.link !== "" &&
                this.platform != ""
            ) {
                this.$axios
                    .get("/api/share/createShare", {
                        params: {
                            title: this.title,
                            kind: this.shareClass,
                            area: this.areaClass,
                            tags: JSON.stringify(this.selectTagList),
                            rate: this.rate,
                            profile: this.profile,
                            href: this.link,
                            platform: this.platform,
                        },
                    })
                    .then((res) => {
                        console.log(res.data.data.mod);
                        if (res.data.data.mod === 1 || res.data.data.mod === 3) {
                            this.$Message.success("创建成功!");
                        } else if (res.data.data.mod === 2) {
                            this.$Message.info("时间未到!");
                        }
                    });
            } else {
                this.$Message.info("信息不全，请仔细检查！");
            }
        },
        showYL() {
            if (!this.iShowYL) {
                this.iShowYL = true;
            } else this.iShowYL = false;
        },
    },
    components: {
        "button-sao": buttonSao
    },
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 992px) {
    .upload-img-box {
        padding: 20px 0;
        width: 340px;
    }
}

@media screen and (max-width: 992px) {
    .upload-img-box {
        padding: 20px 0;
        width: 200px;
    }
}

input {
    min-width: 200px;
    outline: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #aaa;
    text-align: center;

    &:focus {
        border-bottom: 1px solid black;
    }

    &:focus label {
        font-size: 24px;
    }
}

.ivu-upload {
    display: flex;
    align-items: center;
}

.do-share {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 20px #eee;
    height: 100%;

    .do-share-box {
        // margin-top: 20px;
        // margin-bottom: 20px;
        background-color: white;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        height: 100%;

        span {
            display: flex;
            align-items: center;
        }

        .write-edit-breadcrumb {
            display: flex;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .do-share-class {
            display: flex;
            letter-spacing: 4px;
            width: 450px;
            // margin: 0 auto;
            justify-content: flex-start;
        }

        h3 {
            padding-bottom: 10px;
        }

        .do-share-main {
            display: flex;
            // align-items: center;
            flex-direction: column;
            width: 100%;
            // min-height: 550px;
            height: 100%;

            .do-share-main-item {
                display: flex;
                letter-spacing: 4px;
                flex-wrap: wrap;
                padding-top: 20px;
                width: 450px;

                .share-main-item-tag {
                    cursor: pointer;
                }

                .fm-file-url {
                    width: 120px;
                    height: 120px;
                    margin-left: 5px;
                }
            }

            .do-share-main-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 60px;
                padding-top: 40px;
            }
        }
    }
}
</style>
